<template>
	<view class="receivingAddress">
		<u--form class="formContent" labelPosition="left" :model="model" :rules="rules" ref="uForm">
			<u-form-item labelWidth='120' label="收货人" prop="formData.name" borderBottom ref="name">
				<u--input v-model="model.formData.name" border="none" placeholder="请输入姓名"></u--input>
			</u-form-item>
			<u-form-item labelWidth='120' label="手机号码" prop="formData.phone" borderBottom ref="phone">
				<u--input v-model="model.formData.phone" border="none" placeholder="请输入手机号码"></u--input>
			</u-form-item>
			<u-form-item labelWidth='120' label="所在地区" prop="formData.region" borderBottom ref="region"
				@tap="showPicker=true">
				<u--input v-model="model.formData.region" border="none" placeholder="请选择地区"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item labelWidth='120' label="详细地址" prop="formData.address" borderBottom ref="address">
				<u--input v-model="model.formData.address" border="none" placeholder="请输入详细地址"></u--input>
			</u-form-item>
			<u-form-item labelWidth='120' label="设置默认地址" prop="formData.isDefault" ref="isDefault">
				<u-switch slot="right" inactiveValue='rgba(238, 238, 238, 1)' activeColor="rgba(68, 212, 168, 1)"
					v-model="model.formData.isDefault"></u-switch>
			</u-form-item>
		</u--form>
		<view class="commonBtn">
			<view class="btnCon" @tap="saveInfo">
				<text>保存</text>
			</view>
		</view>
		<!-- 地区选择 -->
		<u-picker :show="showPicker" title='选择地区' keyName="label" :columns="columns" @confirm="handleConfirm"
			@cancel="showPicker = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					formData: {
						name: "",
						phone: "",
						region: "",
						address: "",
						isDefault: '',
					},
				},
				rules: {
					'formData.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'formData.phone': {
						type: 'string',
						required: true,
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '请输入正确手机号',
						trigger: ['blur', 'change']
					},
					'formData.region': {
						type: 'string',
						required: true,
						message: '请输入地区',
						trigger: ['blur', 'change']
					},
					'formData.address': {
						type: 'string',
						required: true,
						message: '请输入地址',
						trigger: ['blur', 'change']
					},
				},
				showPicker: false,
				columns: [
					// 省
					[{
							label: '北京',
							value: '110000'
						},
						{
							label: '上海',
							value: '310000'
						},
						{
							label: '广东',
							value: '440000'
						}
					],
					// 市
					[{
							label: '北京市',
							value: '110100'
						},
						{
							label: '东城区',
							value: '110101'
						},
						{
							label: '西城区',
							value: '110102'
						}
					],
					// 区
					[{
							label: '东城区',
							value: '110101'
						},
						{
							label: '西城区',
							value: '110102'
						},
						{
							label: '朝阳区',
							value: '110105'
						}
					]
				]
			}
		},
		methods: {
			handleConfirm(e) {
				console.log('选择结果:', e.value)
				this.showPicker = false
				this.model1.formData.region = e.value
				this.$refs.uForm.validateField('formData.region')
			},
			saveInfo() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.receivingAddress {
		height: 100%;

		.formContent {
			background-color: #fff;
			padding: 24rpx;
		}
	}

	.u-form-item {
		height: 96rpx;
	}

	::v-deep .u-form-item {
		height: 96rpx;
	}

	.u-popup__content {
		border-radius: 36rpx;
	}

	::v-deep .u-popup__content {
		border-radius: 36rpx;
	}
</style>